<div class="options">
  <a
    class="source-code-button"
    href="https://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/trackBy"
    mat-raised-button
    target="_blank"
  >
    <mat-icon>open_in_new</mat-icon>
    Source
  </a>
  <markdown [src]="'assets/trackBy.md'"></markdown>
</div>
<div class="options-header">
  <button (click)="reset()" class="cols-2" color="accent" mat-raised-button>Reset</button>
  <button (click)="addItem()" class="add-button cols-2" mat-mini-fab>
    <mat-icon>add</mat-icon>
  </button>
</div>

<gridster [options]="options">
  @for (item of dashboard; track item.id) {
    <gridster-item [item]="item">
      <button
        (mousedown)="removeItem($event, item)"
        (touchstart)="removeItem($event, item)"
        mat-mini-fab
        style="position: absolute; right: 10px; top: 10px"
      >
        <mat-icon>delete</mat-icon>
      </button>
      <app-track-by-item [id]="item.id"></app-track-by-item>
    </gridster-item>
  }
</gridster>
